<template>
  <view class="detail-view">
    <u-form label-width="150" :model="add_form" ref="uForm">
      <view class="form-model-view">
        <u-form-item label="所属店铺" prop="shopName">
          <view
            class="clearfix form-val"
            @click="goPage('/pagesT/shop/selShop')"
          >
            <view class="float_right" @click.stop="add_form.shopId = ''">
              <u-icon
                :name="!add_form.shopId ? 'arrow-right' : 'close-circle-fill'"
                size="28"
                color="#999999"
              >
              </u-icon>
            </view>
            <text class="float_right ellipsis">{{
              add_form.shopId ? add_form.shopName : "请选择"
            }}</text>
          </view>
        </u-form-item>
        <u-form-item label="账户名称">
          <view class="form-value">
            <input v-model="add_form.name" placeholder="请输入账户名称" />
          </view>
        </u-form-item>
        <u-form-item label="账户号">
          <view class="form-value">
            <input
              v-model="add_form.accountNumber"
              placeholder="请输入账户号"
            />
          </view>
        </u-form-item>
        <u-form-item label="期初余额">
          <view class="form-value">
            <input
              v-model="add_form.money"
              :disabled="!!account_id"
              placeholder="请输入期初余额"
            />
          </view>
        </u-form-item>
        <u-form-item label="开户行名称" v-if="add_form.type === 3">
          <view class="form-value">
            <input v-model="add_form.bankName" placeholder="请输入开户行名称" />
          </view>
        </u-form-item>
        <u-form-item label="账户类型" prop="settlementMethod">
          <view class="float_right" @click="openMethods(index)">
            <text>{{ add_form.settlementMethod || "请选择" }}</text>
            <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
          </view>
        </u-form-item>
        <u-form-item label="备注">
          <view class="form-value">
            <input v-model="add_form.remark" />
          </view>
        </u-form-item>
      </view>
    </u-form>
    <u-select
      @confirm="methodsConfirm"
      v-model="methods_show"
      :list="pay_type_list"
    ></u-select>
    <view class="detail-bottom">
      <view class="handel-btn" @click="submit">提交订单</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rules: {
        shopName: [
          {
            required: true,
            message: "请选择所属店铺",
            trigger: ["change", "blur"],
          },
        ],
        settlementMethod: [
          {
            required: true,
            message: "请选择账户类型",
            trigger: ["change", "blur"],
          },
        ],
      },
      add_form: {
        isDefault: 5,
        remark: "",
        settlementMethod: "",
        accountNumber: "",
        money: "",
        name: "",
        enableStatus: "",
        operatorName: "",
        receivable: "",
        type: "",
        shopId: "",
        shopName: "",
        bankName: "",
        receiptRequisitionAccountDate: [
          {
            collectionAmount: "",
            preferentialAmount: "",
            actualAmount: "",
            settlementMethod: "",
            remark: "",
            accountName: "",
            accountId: "",
          },
        ],
      },
      methods_show: false,
      account_index: 0,
      pay_type_list: [
        {
          label: "普通账户",
          value: 4,
        },
        {
          label: "支付宝账户",
          value: 1,
        },
        {
          label: "微信账户",
          value: 2,
        },
        {
          label: "银行账户",
          value: 3,
        },
      ],
      customerData: "",
      account_id: "",
      shopData: {},
      AccountData: {},
      index: "",
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  watch: {
    customerData(val) {
      if (val) {
        this.add_form.custormerId = val.id;
        this.add_form.custormerName = val.name;
        this.add_form.receivable = val.money;
      }
    },
    // 店铺
    shopData(val) {
      if (val) {
        this.add_form.shopName = val.name;
        this.add_form.shopId = val.id;
      }
    },
    AccountData(val) {
      if (val) {
        console.log(val);
        this.add_form.receiptRequisitionAccountDate[this.index].accountId =
          val.id;
        this.add_form.receiptRequisitionAccountDate[this.index].accountName =
          val.name;
      }
    },
  },
  onLoad(options) {
    if (options.id) {
      this.account_id = options.id;
      uni.setNavigationBarTitle({
        title: "编辑账户",
      });
      this.getAccountInfo();
    } else {
      this.add_form.operatorId = this.userInfo.userCenterId;
      this.add_form.operatorName = this.userInfo.name || "";
    }
  },
  methods: {
    // 详情
    getAccountInfo() {
      this.$u.api.getAccountInfo(this.account_id).then(({ data }) => {
        this.add_form = {
          accountNumber: data.accountNumber,
          beginMoney: data.beginMoney,
          enableStatus: data.enableStatus,
          money: data.money,
          name: data.name,
          shopId: data.shopId,
          shopName: data.shopName,
          type: data.type,
          remark: data.remark,
        };
      });
    },
    openMethods(index) {
      console.log(index);
      this.methods_show = true;
      this.account_index = index;
    },
    methodsConfirm(arr) {
      console.log(arr);
      this.add_form.settlementMethod = arr[0].label;
      this.add_form.type = arr[0].value;
    },

    //  添加
    submit() {
      const params = {
        money: this.add_form.money,
        bankName: this.add_form.bankName,
        accountNumber: this.add_form.accountNumber,
        beginMoney: this.add_form.beginMoney,
        enableStatus: this.add_form.enableStatus,
        name: this.add_form.name,
        shopId: this.add_form.shopId,
        shopName: this.add_form.shopName,
        type: this.add_form.type,
        remark: this.add_form.remark,
      };

      if (this.account_id) {
        this.$u.api.editAccount(this.account_id, params).then((res) => {
          this.$u.toast("修改成功");
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        });
      } else {
        this.$u.api.addAccount(params).then((res) => {
          this.$u.toast("新增成功");
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        });
      }
    },
    settlementAccount(index) {
      if (!this.add_form.shopId) {
        this.$u.toast("必须先选择商铺");
        return;
      }
      this.goPage("/pagesT/account/selAccount");
      this.index = index;
    },
    delsettlementAccount() {
      this.add_form.receiptRequisitionAccountDate[this.index].accountId = "";
      this.add_form.receiptRequisitionAccountDate[this.index].accountName = "";
    },
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style lang="scss" scoped>
.detail-ul {
  .detail-li {
    padding-left: 60rpx;
    position: relative;
    border-bottom: 1px solid #eeeeee;

    &:last-child {
      border-bottom: 0 none;
    }

    .del-icon {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }

    .title {
      line-height: 80rpx;
    }

    .money-ul {
      border-top: 1px solid #eeeeee;
      padding: 20rpx 0;
      display: flex;

      .money-li {
        flex: 3;
        border-right: 1px solid #eeeeee;

        input {
          height: 80rpx;
          line-height: 80rpx;
          text-align: center;
        }

        &:last-child {
          border-right: 0 none;
        }
      }
    }

    .bottom {
      border-top: 1px solid #eeeeee;

      input {
        height: 80rpx;
        line-height: 80rpx;
      }
    }
  }
}
.handel-btn {
  background-color: #fb5904 !important;
  border-color: #fb5904 !important;
}
</style>
